import React, { PureComponent } from 'react'
import styled from 'styled-components'

/**
 * 特点：
 * 1.props穿透
 */


const HYInput = styled.input.attrs({
  placeholder: 'name',
  bColor: 'red'
})`
  background-color: lightblue;
  border-color: ${props => props.bColor};
  color: ${props => props.color}
`

export default class Profile extends PureComponent {
  constructor(props) {
    super(props)

    this.state = {
      color: 'purple'
    }
  }

  render() {
    return (
      <div>
        <input type="text" />
        <HYInput type="password" color={this.state.color}/>
        <h2>Profile Title</h2>
        <ul>
          <li>username</li>
          <li>password</li>
          <li>sex</li>
        </ul>
      </div>
    )
  }
}